<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>背景图</title>
    <style>
        div {
            width: 800px;
            height: 800px;
            /* 设置背景色 */
            /* background-color: rgba(0,0,255,.5); */
            /* 添加背景图 */
            /* background-image: url(./images/jz2.jpg); */
            /* 设置平铺方式 默认  repeat */
            /* background-repeat: repeat-x;
            background-repeat: repeat-y;
            background-repeat: no-repeat; */
            /* 位置 */
            /* background-position: center;
            background-position: right bottom;
            background-position: 10px 100px;
            background-position: 0px 0px; */
            /* 大小 */
            /* background-size: 500px 300px; */
            /* css3 新特性 拉伸图片 让图片  撑满整个容器 */
            /* 
            contain  图片长轴拉伸  保证图片完整 但是容器不一定铺满
            cover   图片短轴拉伸  保证容器被背景图铺满 但是图片不一定完整
            */
            /* background-size: contain;
            background-size: cover; */
            /* 背景图综合设置 */
            background:  url(./images/jz2.jpg) rgba(0,0,255,.5) ;
            background-repeat: no-repeat; 
        }
    </style>
</head>
<body>

    <div>

    </div>
    
</body>
</html>